<template>
    <el-popover placement="bottom-start" trigger="click"
                popper-class="tree-popper"
                :width="treeSelect.width"
                v-model="treeSelect.status">
        <div class="tree-select" :class="{'block': block}" slot="reference" ref="treeSelect"
             @mouseover="treeSelect.hover=true" @mouseout="treeSelect.hover=false">
            <div class="tree-input" :class="Object.assign({'is-focus': treeSelect.status}, sizeClass)">
                <input type="text" readonly="readonly" autocomplete="off" class="tree-input__inner"
                       :placeholder="placeholder || $t('platform.setting.tree.org')" v-model="dataCache.name">
                <span class="tree-input__suffix" @click.stop="clearSelectNode">
                    <span class="tree-input__suffix-inner">
                        <i class="tree-select__caret tree-input__icon el-icon-arrow-up"
                           :class="{'is-reverse': treeSelect.status,'el-icon-circle-close': clearable && Boolean(dataCache.code) && treeSelect.hover}"></i>
                    </span>
                </span>
            </div>
        </div>
        <el-scrollbar>
            <div class="p-3 text-center" v-if="!orgList.length">
                <component-page-loading :status="orgListStatus" @reload="getOrgs"></component-page-loading>
            </div>
            <div class="p-2" v-else>
                <el-input :placeholder="$t('form.inputPlaceholder')" v-model="filterKeyword" size="small" clearable></el-input>
            </div>
            <div class="pb-2" v-if="orgList.length">
                <el-tree ref="treeOrg"
                         highlight-current
                         node-key="code"
                         :indent="18"
                         :data="orgList"
                         :props="orgProps"
                         :expand-on-click-node="false"
                         :filter-node-method="filterNode"
                         @current-change="selectNode">
                    <div class="org-tree-node" slot-scope="{ node, data }">
                        <div class="node-info">
                            <i class="el-icon-folder node-icon"></i>{{ data.name }}
                        </div>
                    </div>
                </el-tree>
            </div>
        </el-scrollbar>
    </el-popover>
</template>

<script>
export default {
    name: "PageOrgTreeOption",
    model: {
        prop: 'orgCode',
        event: 'change'
    },
    props: {
        orgCode: {
            type: String,
            default: null
        },
        size: {
            type: String,
            default: null
        },
        clearable: {
            type: Boolean,
            default: true
        },
        block: {
            type: Boolean,
            default: false
        },
        initFirstNode: {
            type: Boolean,
            default: false
        },
        placeholder: String
    },
    data() {
        return {
            filterKeyword: '',
            treeSelect: {
                status: false,
                width: 200,
                hover: false,
            },
            orgListStatus: 'dle',
            orgList: [],
            orgProps: {
                label: 'name',
                children: 'children'
            },
            dataList: [],
            dataCache: {
                code: '',
                name: '',
            }
        }
    },
    computed: {
        sizeClass() {
            return {
                'tree-input--medium': this.size == 'medium',
                'tree-input--small': this.size == 'small',
                'tree-input--mini': this.size == 'mini',
            };
        }
    },
    watch: {
        filterKeyword: function (n, o) {
            this.$refs.treeOrg.filter(n);
        },
        // 外部改变当前选中节点
        orgCode: function (n, o) {
            this.intShowNode(this.orgCode);
        },
        // 调整popper宽度
        'treeSelect.status': function (n, o) {
            if (this.treeSelect.status) {
                this.treeSelect.width = this.$refs.treeSelect.offsetWidth;
            }
        },
    },
    created() {
        // 获取树数据
        this.getOrgs();
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.name.search(new RegExp(value, 'i')) !== -1;
        },
        getOrgs() {
            this.orgListStatus = 'loading';
            axios.get('/common/getOrgList').then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.orgList = response.data.resp_data.treeList;
                    this.orgListStatus = !this.orgList.length ? 'nodata' : 'dle';
                    this.dataList = response.data.resp_data.dataList;
                    // 初始化选中第一个节点
                    if (this.initFirstNode) {
                        return this.initSelectFirstNode();
                    }
                    // 初始化选中当前节点
                    if (this.orgList.length && Boolean(this.orgCode)) {
                        return this.intShowNode(this.orgCode);
                    }
                } else {
                    this.orgListStatus = 'error';
                }
            })
        },
        // 初始化选中第一个节点
        initSelectFirstNode() {
            if (this.orgList[0] == null) {
                return false;
            }
            this.dataCache.code = this.orgList[0].code;
            this.dataCache.name = this.orgList[0].name;
            // 对外广播事件
            this.$emit('change', this.dataCache.code);
            // 当前选中节点
            this.$nextTick(function () {
                this.$refs.treeOrg.setCurrentKey(this.dataCache.code);
            })
        },
        // 初始化当前显示节点
        intShowNode(orgCode) {
            // 初始化数据
            if (Boolean(orgCode) && this.dataList[orgCode] != null) {
                this.dataCache.code = this.dataList[orgCode].code;
                this.dataCache.name = this.dataList[orgCode].name;
            } else {
                this.dataCache.code = '';
                this.dataCache.name = '';
            }
            // 当前选中节点
            this.$nextTick(function () {
                this.$refs.treeOrg.setCurrentKey(this.dataCache.code);
            })
        },
        // 点击选中 tree 节点
        selectNode(data) {
            this.dataCache.code = data.code;
            this.dataCache.name = data.name;
            // 对外广播事件
            this.$emit('change', this.dataCache.code);
            // 关闭弹窗
            this.treeSelect.status = false;
        },
        // 取消选中节点
        clearSelectNode() {
            if (!this.clearable || !Boolean(this.dataCache.code)) {
                // 开关弹窗
                this.treeSelect.status = !this.treeSelect.status;
                // 终止继续
                return false;
            }
            this.dataCache.code = '';
            this.dataCache.name = '';
            // 树取消选中节点
            this.$refs.treeOrg.setCurrentKey(null);
            // 对外广播事件
            this.$emit('change', this.dataCache.code);
            // 关闭弹窗
            this.treeSelect.status = false;
        }
    },
}
</script>

<style lang="scss" scoped>
::v-deep .el-scrollbar__wrap {
    max-height: 300px;
}

.tree-select {
    display: inline-block;
    position: relative;
    outline: none;
}

.tree-select.block {
    display: block;
}

.tree-select .tree-input {
    display: block;
    position: relative;
    font-size: 14px;
    width: 100%;
}

.tree-input__inner {
    display: inline-block;
    appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid $boder-color-first;
    box-sizing: border-box;
    color: $font-color-second;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 30px 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
    cursor: pointer;
}

.tree-input__inner::placeholder {
    color: $font-color-fourth
}

.tree-select:hover .tree-input__inner {
    border-color: $font-color-fourth;
}

.tree-select .tree-input.is-focus .tree-input__inner {
    border-color: $color-primary;
}

.el-form-item.is-error .tree-input__inner {
    border-color: $color-danger;
}

.tree-input__suffix {
    position: absolute;
    top: 0;
    right: 5px;
    transition: all .3s;
    height: 100%;
    color: $font-color-fourth;
    text-align: center;
    pointer-events: none;
}

.tree-input__suffix-inner {
    pointer-events: all;
}

.tree-input__icon {
    height: 100%;
    width: 25px;
    text-align: center;
    transition: all .3s;
    line-height: 40px;
}

.tree-select .tree-input .tree-select__caret {
    color: $font-color-fourth;
    font-size: 14px;
    transition: transform .3s;
    transform: rotateZ(180deg);
    cursor: pointer;
}

.tree-select .tree-input .tree-select__caret.is-reverse {
    transform: rotateZ(0);
}

.tree-select .tree-input .tree-select__caret.el-icon-circle-close:hover:before {
    color: $font-color-third
}

.tree-input__icon:after {
    content: '';
    height: 100%;
    width: 0;
    display: inline-block;
    vertical-align: middle;
}

.tree-input--medium {
    font-size: 14px
}

.tree-input--medium .tree-input__inner {
    height: 36px;
    line-height: 36px
}

.tree-input--medium .tree-input__icon {
    line-height: 36px
}

.tree-input--small {
    font-size: 13px
}

.tree-input--small .tree-input__inner {
    height: 32px;
    line-height: 32px
}

.tree-input--small .tree-input__icon {
    line-height: 32px
}

.tree-input--mini {
    font-size: 12px
}

.tree-input--mini .tree-input__inner {
    height: 28px;
    line-height: 28px
}

.tree-input--mini .tree-input__icon {
    line-height: 28px
}

.org-tree-node {
    display: flex;
    flex-direction: row;
    flex: auto;
    align-items: center;
    font-size: $font-size-third;
    padding-right: 15px;
}

.org-tree-node .node-info {
    flex: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-tree-node .node-icon {
    color: $tree-color-icon;
    margin-right: 5px;
}
</style>
